<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-adx__loanreportday}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
         <el-form-item label="产品名称">
          <el-input v-model="dataForm.productName" placeholder="账户名称" clearable></el-input>
          </el-form-item>
         <el-form-item label="商务">
            <el-select v-model="dataForm.business" placeholder="选择商务人员" filterable clearable>
              <el-option v-for="item in businessList " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="投放起始时间">
          <el-date-picker v-model="dataForm.stime" value-format="yyyy-MM-dd" type="date"
            placeholder="投放起始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="投放结束时间">
          <el-date-picker v-model="dataForm.etime" value-format="yyyy-MM-dd" type="date"
            placeholder="投放结束时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('adx:loanreportday:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('adx:loanreportday:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
        </el-form-item>
                    <el-form-item>
          <el-button  type="success" @click="download()">模板下载</el-button>
        </el-form-item>
              <el-form-item>
          <el-upload
              class="upload-demo"
              :action="exportURL">
              <el-button  type="warning">导入报表</el-button>
              </el-upload>
        </el-form-item>
      </el-form>
     <el-table :span-method="objectSpanMethod" v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;" 
       show-summary :summary-method="getSummaries"     >
        <el-table-column type="selection"  header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" v-if="false" label="主键" header-align="center" align="center"></el-table-column>
        <el-table-column prop="dspId" v-if="false"  label="广告主ID" header-align="center" align="center"></el-table-column>
        <el-table-column prop="day" label="日期" width="95" header-align="center" align="center"></el-table-column>
        <el-table-column prop="actEventTypeTotal" label="推广数量" header-align="center" align="center"></el-table-column>
        <!-- <el-table-column prop="actEventTypeTotal" label="实际转换数量" header-align="center" align="center"></el-table-column> -->
       <el-table-column prop="productCompany" width="150px" label="产品公司全称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="mediaCompany" width="150px" label="媒体公司全称" header-align="center" align="center"></el-table-column> -->
           <el-table-column prop="productName" label="产品名称" header-align="center" align="center"></el-table-column>
           <el-table-column prop="profit" label="利润" header-align="center" align="center"></el-table-column>
        <el-table-column prop="productPrice" label="厂家单价" header-align="center" align="center"></el-table-column>
        <el-table-column prop="productAmout" width="150px" label="厂家结算" header-align="center" align="center"></el-table-column>
        <el-table-column prop="mediaPrice" label="乙方单价" header-align="center" align="center"></el-table-column>
        <el-table-column prop="mediaAmout" width="150px" label="乙方结算" header-align="center" align="center"></el-table-column>
         <el-table-column prop="code" label="链接代码" header-align="center" align="center"></el-table-column>
        <el-table-column prop="business" label="商务" header-align="center" align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('adx:loanreportday:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
            <el-button v-if="$hasPermission('adx:loanreportday:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './loanreportday-add-or-update'
import { getDictDataList } from '@/utils'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/adx/loanreportday/page',
        getDataListIsPage: true,
        exportURL: '/adx/loanreportday/export',
        deleteURL: '/adx/loanreportday',
        deleteIsBatch: true
      },
       businessList:[],
      exportURL:window.SITE_CONFIG['apiURL']+'/adx/loanreportday/import',
      dataForm: {
        id: '',

      }
    }
  },
  mounted() {
    this.getBusinessDict();
  },
  components: {
    AddOrUpdate
  },
   methods:{
    download() {
       window.open(window.SITE_CONFIG['apiURL']+'/adx/loanreportday/download')
    },
    getBusinessDict() {
      this.businessList = getDictDataList("businessList")
    },
      getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
      if (index === 1) {
        sums[index] = '数据合计';
        return;
      }
      const values = data.map(item => Number(item[column.property]));
      // 只对amount这一列进行总计核算。
      if (column.property === 'profit'|| column.property === 'productAmout'|| column.property === 'mediaAmout'|| column.property === 'actEventTypeTotal') {
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
          const value =  Number(curr);
          if (!isNaN(value)) {
           return  Math.floor((prev + curr)*100)/100 ;
          }else {
           return prev;
          }
          }, 0);
           sums[index] += '';
        } else {
         sums[index] = '---'
        }
      }
      });
      return sums;
    }
   }
}
</script>
